<!--
 * @Author: C.
 * @Date: 2023-04-26 09:24:26
-->
<template>
  <div
    class="!mb-4 jv-block-wrapper shadow rounded-md px-2"
    :class="[loaded ? '' : 'enter-y', inner ? 'jv-block-wrapper-inner' : '']"
  >
    <span class="jv-block-title hidden">{{ $attrs.title }}</span>
    <CollapseContainer v-bind="$attrs" size="small" v-if="props.wrapper">
      <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </CollapseContainer>
    <div class="py-1" v-else>
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup name="Block">
  // ----------------------------- 第三方引入 -----------------------------
  // import { Card } from 'ant-design-vue';
  import { ref, onMounted } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';

  // ----------------------------- hooks -----------------------------
  const props = defineProps({
    wrapper: {
      type: Boolean as PropType<boolean>,
      default: true,
    },
    inner: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  });

  // ----------------------------- 组件 -----------------------------

  // ----------------------------- 其他引入 -----------------------------

  //----------------------------- 变量声明区 -----------------------------
  // const classWrapper = ref(['enter-y']);
  const loaded = ref(false);
  // ----------------------------- hooks使用区 -----------------------------

  // ----------------------------- 钩子函数区 -----------------------------
  onMounted(() => {
    setTimeout(() => {
      loaded.value = true;
    }, 1000);
  });

  //  ----------------------------- 自定义方法区 -----------------------------
</script>
<style lang="less">
  .jv-block-wrapper {
    border: 2px solid transparent;
    background-color: #fff;
  }

  [data-theme='dark'] {
    .jv-block-wrapper {
      // border: 2px solid transparent;
      background-color: @trigger-dark-bg-color;
    }
  }

  .jv-wrapper-hover {
    // border-color: #03a9f4;
    box-shadow: 0 0 10px @primary-color;
  }

  .jv-wrapper-error {
    // border-color: #03a9f4;
    box-shadow: 0 0 10px red;
  }
</style>
